<!DOCTYPE html>

<style>

.bg {
  display: inline-block;
  margin: 10px;
  width: 33px;
  height: 33px;
  background-color: red;
  /* 99x99px green/red checkerboard (3x3 tiles) */
  background: url();
}

.bg1 {
  background-position: 0px 0px;
}

.bg2 {
  background-position: 0px -66px;
}

.bg3 {
  background-position: -33px -33px;
}

.bg4 {
  background-position: 0px -66px;
}

.bg5 {
  background-position: -66px -66px;
}
</style>

<body style="width: 500px">

<div style="transform: scale(0.5, 0.5); transform-origin: top left;">
  <div class="bg bg1"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <div class="bg bg4"></div>
  <div class="bg bg5"></div>
</div>

<div style="transform: scale(0.75, 0.75); transform-origin: top left;">
  <div class="bg bg1"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <div class="bg bg4"></div>
  <div class="bg bg5"></div>
</div>

<div>
  <div class="bg bg1"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <div class="bg bg4"></div>
  <div class="bg bg5"></div>
</div>

<div style="transform: scale(1.25, 1.25); transform-origin: top left;">
  <div class="bg bg1"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <div class="bg bg4"></div>
  <div class="bg bg5"></div>
</div>

<div style="transform: scale(1.5, 1.5); transform-origin: top left;">
  <div class="bg bg1"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <div class="bg bg4"></div>
  <div class="bg bg5"></div>
</div>
</body>
